<template>
  <div>
    <div class="accordion" id="accordionExample">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                  aria-expanded="true" aria-controls="collapseOne">
            选择题
          </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
             data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <button @click="add('MultipleChoice')">单选</button>
            <button @click="add('MultipleSelection')">多选</button>
            <button @click="add('GapFilling')">填空</button>
            <button @click="add('Test')">测试</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { EventBus } from '@/eventBus.js'

export default {
  name: 'Page1',
  data () {
    return {
      containerList: [],
      nextId: 1
    }
  },
  methods: {
    add (name) {
      const object = {
        id: this.nextId,
        name: name
      }
      this.containerList.push(object)
      this.$options.components[name] = {
        template: `<div>${name}</div>`
      }
      EventBus.$emit('custom-event', { message: this.containerList })
      this.nextId++
    }
  }
}
</script>

<style lang="less" scoped>
.accordion-body {
  button {
    width: 108px;
    height: 24px;
    background-color: white;
    border: none;
    border-radius: 5px;
  }

  button:hover {
    background-color: #0095ff;
    color: white;
  }
}

</style>
